<template>
  <!-- 主要导航栏 -->
  <nav class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow-sm fixed w-full h-16 z-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <!-- 左侧品牌标识 -->
        <div class="flex items-center">
          <router-link to="/" class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="40" width="40"
              class=" hover:bg-blue-300 rounded-xl">
              <!-- 垂直线 -->
              <line x1="12" y1="8" x2="12" y2="24" class="dark:stroke-gray-200" stroke="#1e293b" stroke-width="2"
                stroke-linecap="round" />
              <!-- 上曲线 -->
              <path d="M12,12 C14,11 17,10 18,12" class="dark:stroke-gray-200" fill="none" stroke="#1e293b"
                stroke-width="2" stroke-linecap="round" />
              <!-- 下曲线 -->
              <path d="M12,20 C14,21 17,22 18,20" class="dark:stroke-gray-200" fill="none" stroke="#1e293b"
                stroke-width="2" stroke-linecap="round" />
              <!-- 内容点 -->
              <circle cx="15" cy="13" r="0.7" fill="#60a5fa" class="dark:stroke-gray-200" />
              <circle cx="16" cy="20" r="0.7" fill="#60a5fa" class="dark:stroke-gray-200" />
              <!-- 书本页脚 -->
              <path d="M8,28 L24,26" stroke="#94a3b8" stroke-width="0.7" stroke-linecap="round"
                class="dark:stroke-gray-200" stroke-dasharray="1,1" />
            </svg>
            <!-- <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">Brief-Blog</span> -->
          </router-link>
        </div>

        <!-- 中间导航链接 -->
        <div class="hidden md:flex items-center space-x-8">
          <router-link to="/articles/home"
            class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
            active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
            文章
          </router-link>
          <router-link to="/articles/category"
            class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
            active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
            分类
          </router-link>
          <router-link to="/articles/timeline"
            class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
            active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
            时间线
          </router-link>
        </div>

        <!-- 右侧操作区 -->
        <div class="flex items-center space-x-4">
          <!-- 搜索框部分 -->
          <div class="flex items-center space-x-4 flex-col relative">
            <div class="search-box relative group">
              <button class="search-btn" @click="search()">
                <svg class="w-5 h-5 transition-colors duration-200 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </button>
              <input v-model="searchInput" type="search" @keyup.enter="search()"
                class="search-txt dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600" placeholder="搜索" />
            </div>


            <!-- 搜索结果展示 -->
            <div v-if="searchInput" class="w-48 absolute right-[1px]  top-12 dark:bg-gray-800">
              <ul v-infinite-scroll="" class="infinite-list" style="overflow: auto">

                <li v-for="item in searchResults" @click="navigateTo(`/articles/content?id=${item.id}`)" class="infinite-list-item w-full mb-1 bg-gray-200 rounded-lg shadow-sm hover:shadow-md 
                        dark:bg-gray-800 dark:hover:shadow-lg dark:border-gray-700
                        transition-shadow duration-200 p-3 border border-transparent
                        dark:hover:border-gray-600"> <!-- 新增悬停边框 -->
                  <!-- 标题部分 -->
                  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-1">
                    {{ item.title }}
                  </h2>
                  <!-- 副标题 -->
                  <p class="text-gray-500 dark:text-gray-400 text-sm mb-1">
                    {{ item.subtitle }}
                  </p>
                  <!-- 元数据 -->
                  <div class="flex flex-col text-[15px] text-gray-500 dark:text-gray-400">
                    <!-- 作者 -->
                    <div class="flex items-center">
                      <svg
                        class="w-3 h-3 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                      </svg>
                      <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                        {{ item.author }}
                      </span>
                    </div>
                    <div class="flex items-center group">
                      <svg
                        class="w-3 h-3 mr-1 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <span class="group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
                        {{ item.time }}
                      </span>
                    </div>
                  </div>
                  <div class="w-full h-[2px] bg-black"></div>
                </li>
              </ul>

            </div>
          </div>
          <!-- 暗色模式切换 -->
          <button @click="themeStore.changeStatus()" key="dark-mode"
            class=" scale-75 p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 items-center justify-center hidden md:flex">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" v-if="themeStore.isDark">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
            </svg>

            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>

          </button>
          <!-- 移动端菜单按钮 -->
          <div class="w-10 h-10 flex items-center justify-center hover:bg-slate-500 dark:hover:bg-gray-600 md:hidden"
            @click="drawer = true">
            <svg t="1746846489294" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5889"
              width="30" height="30" class="icon text-gray-800 dark:text-gray-200">
              <path
                d="M405.2992 163.9424H225.28c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44h180.0192c33.8944 0 61.44-27.5456 61.44-61.44V225.3824c0-33.8944-27.5456-61.44-61.44-61.44zM405.2992 557.1584H225.28c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44h180.0192c33.8944 0 61.44-27.5456 61.44-61.44V618.5984c0-33.792-27.5456-61.44-61.44-61.44zM798.72 163.9424H618.7008c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44H798.72c33.8944 0 61.44-27.5456 61.44-61.44V225.3824c0-33.8944-27.5456-61.44-61.44-61.44zM798.72 557.1584H618.7008c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44H798.72c33.8944 0 61.44-27.5456 61.44-61.44V618.5984c0-33.792-27.5456-61.44-61.44-61.44z"
                p-id="5890"></path>
            </svg>

          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- 抽屉菜单 -->
  <el-drawer direction='ltr' v-model="drawer" title="I am the title" :with-header="false" size="240"
    class="dark:bg-gray-800 dark:text-gray-200">
    <div class="flex justify-center items-center flex-col w-full dark:bg-gray-800">
      <div @click="navigateTo('/articles/home')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
        文章
      </div>
      <div @click="navigateTo('/articles/category')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
        分类
      </div>
      <div @click="navigateTo('/articles/timeline')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
        时间线
      </div>
      <div @click="themeStore.changeStatus()" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
        黑暗模式
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">

// -------------------------------------------------------引入的组件
import BriefBlogIcon from '../../public/svg/BriefBlogIcon.vue';
import { ref } from 'vue'

import { systemStatus } from '../../ts/pinia';

import { useRouter } from 'vue-router';
let router = useRouter()

let themeStore = systemStatus()
let searchInput = ref('') //搜索框输入内容
const drawer = ref(false) //手机端左侧菜单

function navigateTo(path: string) {
  console.log(path);

  router.push(path)
  drawer.value = false
}

function search() {
  console.log("搜索内容:", searchInput.value);

}
// 搜索结果展示
let searchResults = ref([{
  id: "1",
  title: "Linux命令6",
  subtitle: "常用Linux命令手册与使用技巧",
  author: "技术小站",
  time: "2023-10-20",
  tags: "系统运维/Linux",
  viewCount: "23",
  commentCount: "15"
}, {
  id: "2",
  title: "Linux命令7",
  subtitle: "高级Linux命令解析",
  author: "技术小站",
  time: "2023-10-21",
  tags: "系统维护/Shell",
  viewCount: "45",
  commentCount: "8"
}, {
  id: "2",
  title: "Linux命令7",
  subtitle: "高级Linux命令解析",
  author: "技术小站",
  time: "2023-10-21",
  tags: "系统维护/Shell",
  viewCount: "45",
  commentCount: "8"
}, {
  id: "2",
  title: "Linux命令7",
  subtitle: "高级Linux命令解析",
  author: "技术小站",
  time: "2023-10-21",
  tags: "系统维护/Shell",
  viewCount: "45",
  commentCount: "8"
}, {
  id: "2",
  title: "Linux命令7",
  subtitle: "高级Linux命令解析",
  author: "技术小站",
  time: "2023-10-21",
  tags: "系统维护/Shell",
  viewCount: "45",
  commentCount: "8"
}])

</script>

<style scoped>
.search-box {
  @apply h-10 flex items-center overflow-hidden transition-all duration-300;
}

.search-btn {
  @apply p-2 rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 absolute left-0 top-1/2 -translate-y-1/2 z-10 transition-colors;
}

.search-txt {
  @apply pl-10 pr-4 w-0 h-full bg-transparent text-sm text-gray-800 placeholder-gray-400 dark:text-gray-200 dark:placeholder-gray-500 transition-all duration-300;
}

.search-line {
  @apply absolute left-8 right-0 bottom-0 h-px bg-blue-500 dark:bg-blue-400 transition-all duration-300 origin-left scale-x-0;
}

/* 展开状态 */
.search-box:hover .search-txt,
.search-txt:focus {
  @apply w-48 pl-10 pr-4;
}

.search-txt:focus {
  @apply dark:caret-gray-200;
  /* 光标颜色 */
}

.search-txt:focus+.search-line {
  @apply scale-x-100;
}

/* 保持图标在展开时的位置 */
.search-box:hover .search-btn,
.search-txt:focus~.search-btn {
  @apply left-0;
}

/* 黑暗模式输入框聚焦边框（如果需要） */
.search-txt:focus {
  @apply dark:ring-1 dark:ring-blue-400;
}


/* -----------------------------------------------------------无限滚动样式-------------------------------------------------------------- */

.infinite-list {
  height: 270px;
  padding: 0;
  margin: 1px;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  flex-direction: column;
  height: auto;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}
</style>